<template>
  <!-- 消息 -->
  <el-tooltip content="消息">
    <el-icon class="koi-icon m-r-18px" style="padding-right: 10px" :size="20" @click="handleMessage">
      <el-badge :value="badgeCount" :hidden="badgeCount <= 0" class="item">
        <ChatDotRound />
      </el-badge>
    </el-icon>
  </el-tooltip>

  <KoiDrawer ref="koiDrawerRef" title="消息列表" footerHidden>
    <template #content>
      <!-- <el-card >
        <div>2024-04-21 16:26:25 导出已完成</div>
        <div>2024-04-21 16:26:25 导出已完成</div>
      </el-card> 
      <el-card style="max-width: 480px">
        <div>标题</div>
        <div>内容</div>
      </el-card> -->
    </template>
  </KoiDrawer>
</template>

<script setup lang="ts">
import mittBus from "@/utils/mittBus";
import { ElNotification } from "element-plus";
import { ref } from "vue";

const koiDrawerRef = ref();
const badgeCount = ref(0);

const handleMessage = () => {
  koiDrawerRef.value.koiOpen();
};

mittBus.on("export", (params:any) => {
  const data = JSON.parse(params.event.data);
  ElNotification({
    title: "新消息",
    message: `${data.data.title}`,
    type: "success"
  });
});
</script>

<style lang="scss" scoped></style>
